<template>
  <CommonPanel title="相对方项目金额列表" :loading="loading">
    <div class="rank-box">
      <Vue3SeamlessScroll
        :list="lists"
        class="rank-box__list"
        :step="0.4"
        :wheel="true"
        :hover="true"
        :limitScrollNum="6"
      >
        <RankItem v-for="item of lists" :key="item.rank" :info="item" />
      </Vue3SeamlessScroll>
      <div class="none" v-if="lists.length === 0 && loading === false">
        <div>暂无数据</div>
      </div>
      <div class="rank-box__more" @click="seeMore()">
        <span>查看更多</span>
        <el-icon color="#ffffffe6"><CaretRight /></el-icon>
      </div>
    </div>
    <Teleport to="body">
      <CommonDialog v-model:visible="visible" title="相对方项目金额排名">
        <ScrollTable :columns="columns" :tableData="copyList" />
      </CommonDialog>
    </Teleport>
  </CommonPanel>
</template>

<script setup>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import RankItem from "../components/rank-item.vue";
import { CaretRight } from "@element-plus/icons-vue";
import { onMounted, ref, watch } from "vue";
import { useStore } from "@/store";
import { numberFormat } from "@/utils";

const storeObj = useStore();

const loading = ref(false);

const visible = ref(false);

const columns = [
  { label: "项目名称", prop: "name" },
  { label: "项目金额", prop: "amount" },
];

let lists = ref([]);

let copyList = ref([]);
async function getDataList() {
  lists.value = []
  loading.value = true;
  const result = await counAmount({
    prjDeptId: storeObj.prjDeptId,
    prjType: storeObj.prjType.join(","),
  }).catch((err) => {
    console.warn(err);
  });
  loading.value = false;
  if (result?.retCode === '0') {
    result.data = result.data.filter(item => item.amount > 0)
    const dataObj = [...result.data.slice(0, 50)];
    copyList.value = result.data
      .slice(0, Math.min(result.data.length, 200))
      .map((item) => {
        return {
          id: item?.id || "",
          name: item?.opposite_party || "",
          amount: numberFormat(item?.amount || 0) + " 元",
        };
      });
    const maxValue = findMaxValue(dataObj);
    lists.value = dataObj.map((item, v) => {
      return {
        rank: v + 1,
        name: item.opposite_party,
        value: item.amount / 10000,
        id: item.id,
        percent: formatToPercentage(item.amount / maxValue),
      };
    });
  }
}

onMounted(() => {
  getDataList();
});

watch(
  () => storeObj.prjDeptId,
  () => {
    getDataList();
  }
);
watch(
  () => storeObj.prjType,
  () => {
    getDataList();
  }
);

const seeMore = () => {
  visible.value = true;
};
const findMaxValue = (data) => {
  if (data.length === 0) {
    return 0;
  }
  const maxValue = data.reduce((max, current) => {
    return max > current.amount ? max : current.amount;
  }, data[0].amount);

  return maxValue;
};
const formatToPercentage = (number) => {
  const percentage = (number * 100).toFixed(2);
  return `${percentage}%`;
};
</script>

<style lang="scss" scoped>
.none {
  width: 100%;
  height: 100%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rank-box {
  height: 100%;
  padding: 12px 16px 12px 23px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  &__list {
    box-sizing: border-box;
    flex: 1;
    height: 0px;
    overflow: hidden;
  }
  &__more {
    margin-top: 12px;
    cursor: pointer;
    padding-left: 17px;
    font-weight: 400;
    font-size: 14px;
    color: #ffffffe6;
    display: flex;
    align-items: center;
    .el-icon {
      font-size: 16px !important;
    }
  }
}
::v-deep {
  .content-box {
    width: 50% !important;
  }
}
</style>
